<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>门店</title>
	<meta name="decorator" content="sysDefault"/>
<script src="${staticPath}/lib//jquery/1.10.2/jquery.js" type="text/javascript"></script>
<script src="${staticPath}/lib/ztree/3.5/js/jquery.ztree.all-3.5.js" type="text/javascript"></script>
<link rel="stylesheet" href="${staticPath}/lib/ztree/3.5/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<SCRIPT type="text/javascript">
		
	var setting = {
			view: {
				selectedMulti: false,
				fontCss: getFont,
				nameIsHTML: true
			},
			edit: {
				enable: true,
				editNameSelectAll: false,
				showRemoveBtn: true,
				showRenameBtn: true
			},
			async: {
				enable: true,
				url: getUrl
			},
			check: {
				enable: false
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeExpand: beforeExpand,
				beforeRemove: beforeRemove,
				beforeEditName:beforeEditName,
				onClick: onClick,
				onDblClick: onDblClick,
				onDrop: onDrop,
				beforeDrag: beforeDrag,
				beforeDrop: beforeDrop
				
			}
			
		};
		var zTree;  
		var treeNodes;
		var _treeNode;
		var dragId;
		var log, className = "dark",
		startTime = 0, endTime = 0, perCount = 100, perTime = 100;
		$(document).ready(function(){
		    $.get("${contextPath}/sys/base/shop/getzNodes",function(data){  
		        $('#result').text(data);//直接展示JSON数据
		        treeNodes=eval("("+data+")");
		       $.fn.zTree.init($("#shopTree"), setting, treeNodes);
		   });  
		  
		});
		function getUrl(treeId, treeNode) {
			return "${contextPath}/sys/base/shop/json?treeNodeId="+treeNode.id;
		}
		function getFont(treeId, node) {
			return node.font ? node.font : {};
		}
		function beforeEditName(treeId, treeNode) {
			if(treeNode.isParent){
				url='${contextPath}/sys/base/shop/region/edit?treeid='+treeNode.id+'';
				window.open(url,'_self');
			}else{
				url='${contextPath}/sys/base/shop/edit?treeid='+treeNode.id+'';
				window.open(url,'_self');
			}		
			return false;
		}
		function beforeExpand(treeId, treeNode) {
			if (!treeNode.isAjaxing) {
				startTime = new Date();
				treeNode.times = 1;
				ajaxGetNodes(treeNode, "refresh");
				return true;
			} else {
				alert("zTree 正在下载数据中，请稍后展开节点。。。");
				return false;
			}
		}
		function ajaxGetNodes(treeNode, reloadType) {
			var zTree = $.fn.zTree.getZTreeObj("shopTree");
			if (reloadType == "refresh") {
				zTree.updateNode(treeNode);
			}
			zTree.reAsyncChildNodes(treeNode, reloadType, true);
		}
		function funform(url,target){
			var treeid;
			if(_treeNode!=null){
				treeid=_treeNode.id
			}
			
			if(treeid==""||typeof(treeid)=="undefined"){
				
				alert("请选择上级节点");
			}else if(_treeNode.isParent){
				window.open(url+"?treeid="+treeid,target);
			}else{
				alert("请选择门店所属区域!");
			}
		}
		
		function beforeRemove(treeId, treeNode) {
			if(treeNode.pId==null){
				alert("不能删除根!");
				return false;
			}else{
				var flag =confirm("确认删除 " +treeNode.name + " 吗？")
				if(flag){
					className = (className === "dark" ? "":"dark");
					var zTree = $.fn.zTree.getZTreeObj("shopTree");
					zTree.selectNode(treeNode);
					if(treeNode.isParent){
						$.get("${contextPath}/sys/base/shop/region/remove?treeId="+treeNode.id+"",function(data){  
					        $('#result').text(data);//直接展示JSON数据
					        zNodes =eval("("+data+")");
					 	}); 
					}else{
						$.get("${contextPath}/sys/base/shop/remove?treeId="+treeNode.id+"",function(data){  
					        $('#result').text(data);//直接展示JSON数据
					        zNodes =eval("("+data+")");
						 }); 
					}				 
				}	
				return flag;
			}
		}
		
		function beforeDrop(treeId, treeNodes, targetNode, moveType) {
			
			  if(targetNode.pId == dragId&&moveType!='inner'){
			    return true;
			  }else{
		        return false;
		      }
		}
		function beforeDrag(treeId, treeNodes,moveType) {
			for (var i=0,l=treeNodes.length; i<l; i++) {
				   dragId = treeNodes[i].pId;
				if (treeNodes[i].drag === false) {
					return false;
				}
			}
			return true;
		}
		function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
			
		    var jsonObject ="[";
		    jsonObject += "{'treeId':'"+targetNode.id+"', 'treeNodes':'"+treeNodes[0].id+"', 'moveType':'"+moveType+"'}";
		    jsonObject += "]";
			className = (className === "dark" ? "":"dark");	
			
			$.get("${contextPath}/sys/base/shop/onDrop?json="+jsonObject,function(data){  			       
			 }); 
		}
		function zTreeOnClick(event, treeId, treeNode) {
		    console.log("zTreeOnClickLog:--------------------------------")
		    console.log(treeId);
		    console.log(treeNode);
		    console.log(treeNode.id);
		}
		function onClick(event, treeId, treeNode, clickFlag) {
			_treeNode=treeNode;
		}
		function onDblClick(event, treeId, treeNode, clickFlag) {
			_treeNode=treeNode;
			if(!treeNode.isParent){
				url='${contextPath}/sys/base/shop/view?treeid='+treeNode.id+'';
				window.open(url,'_self');
			}
		}
	</SCRIPT>
</HEAD>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12">
				<div class="panel panel-default">
				  <div class="panel-heading">
				  <tags:message content="${message}"/>
				    <h3 class="panel-title">
				    	门店管理<span class="glyphicon &{icon}"></span>
				    	<button id="addShopRegion" class="btn btn-success btn-sm pull-right" role="button" onclick="funform('${contextPath}/sys/base/shop/region/add','_self');">新增门店区域</button>
				    	<button id="add"  class="btn btn-success btn-sm pull-right" role="button" onclick="funform('${contextPath}/sys/base/shop/add','_self');">新增门店</button>&nbsp&nbsp
				    </h3>
				  </div>
				  <ul id="shopTree" class="ztree" ></ul>
				</div>			
			</div>
		</div>
	
	</div>
</body>
</html>
